<template name="gmy-float-touch">
	<view>
		<view @touchmove.stop.prevent = "doNothing" >
			<view class="box" @click="show" style="z-index: 999;" :style="{top:top+'px',left:left + 'px'}" @touchmove="touchmove" @touchend="touchend" :animation="animationData" >
				<image :src="mainImg" mode="aspectFill"></image>
			</view>
			<view v-if="imgLists[0]" class="menu  " :class="{menu0:!isShow&&isleft,menu1:isShow&&isleft ,menu1R:isShow&& !isleft ,menu0R:!isShow&& !isleft}" :style="{top:(top-75) +'px', 'z-index': zIndex}" @tap="menuClick(1)" >
				<button v-if="imgLists[0].type == 'share'" class="btn-clear" open-type="share"><image :src="imgLists[0].img" mode=""></image></button>
				<image v-if="imgLists[0].type == 'image'" :src="imgLists[0].img" mode=""></image>
			</view>
			<view v-if="imgLists[1]" class="menu " :class="{menu0:!isShow&&isleft,menu2:isShow&&isleft ,menu2R:isShow&& !isleft ,menu0R:!isShow&& !isleft }"  :style="{top:(top-53) + 'px', 'z-index': zIndex}" @tap="menuClick(2)">
				<button v-if="imgLists[1].type == 'share'" class="btn-clear" open-type="share"><image :src="imgLists[1].img" mode=""></image></button>
				<image v-if="imgLists[1].type == 'image'" :src="imgLists[1].img" mode=""></image>
			</view>
			<view v-if="imgLists[2]" class="menu " :class="{menu0:!isShow&&isleft,menu3:isShow&&isleft ,menu3R:isShow&& !isleft ,menu0R:!isShow&& !isleft}"  :style="{top:top+'px', 'z-index': zIndex}" @tap="menuClick(3)">
				<button v-if="imgLists[2].type == 'share'" class="btn-clear" open-type="share"><image :src="imgLists[2].img" mode=""></image></button>
				<image v-if="imgLists[2].type == 'image'" :src="imgLists[2].img" mode=""></image>
			</view>
			<view v-if="imgLists[3]" class="menu " :class="{menu0:!isShow&&isleft,menu4:isShow&&isleft ,menu4R:isShow&& !isleft ,menu0R:!isShow&& !isleft}"  :style="{top:(top + 53)+'px', 'z-index': zIndex}" @tap="menuClick(4)">
				<button v-if="imgLists[3].type == 'share'" class="btn-clear" open-type="share"><image :src="imgLists[3].img" mode=""></image></button>
				<image v-if="imgLists[3].type == 'image'" :src="imgLists[3].img" mode=""></image>
			</view>
			<view v-if="imgLists[4]" class="menu " :class="{menu0:!isShow&&isleft,menu5:isShow&&isleft ,menu5R:isShow&& !isleft ,menu0R:!isShow&& !isleft}"  :style="{top:(top + 75)+'px', 'z-index': zIndex}" @tap="menuClick(5)">
				<button v-if="imgLists[4].type == 'share'" class="btn-clear" open-type="share"><image :src="imgLists[4].img" mode=""></image></button>
				<image v-if="imgLists[4].type == 'image'" :src="imgLists[4].img" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:"gmy-float-touch",
		data(){
			return {
				isShow:false,
				top:350,
				left:3,
				right:3,
				isleft:true,
				animationData:'',
				zIndex: -1
			}
		},
		props:{
			imgLists:{
				type:Array
			},
			mainImg:{
				type:String,
				default:"/static/gmy-float-touch/main.png"
			}
		},
		methods:{
			doNothing:function(){},
			show:function(){
				this.isShow = !this.isShow;
				this.spred();
			},
			touchmove:function(e){
				if(this.isShow){
					return 
				}
				var position = e.touches[0];
				var wHeight = this.getSystemInfo('H');
				if(position.pageY>100 && position.pageY+100 < wHeight){
					this.top =  position.pageY-20;
				}
				this.left = position.pageX;
			},
			touchend:function(e){
				var wWidth = this.getSystemInfo('W');
				var wHeight = this.getSystemInfo('H');
				const pageX = e.changedTouches[0].clientX;
				if(pageX > wWidth*0.5){
					this.isleft = false;
					this.left = wWidth-50;
				}
				else{
					this.isleft = true;
					this.left = 3;
				}
				if (this.top < (wHeight / 3.2)) {
					this.top = wHeight / 2.4;
				}
			},
			menuClick:function(index){
				this.$emit("menuClick",index);
			},
			getSystemInfo:function(type){
				var result;
				const screen = uni.getSystemInfoSync();
				const wHeight = screen.windowHeight;
				const wWidth = screen.windowWidth;
				switch(type){
					case 'H':result =  wHeight;break;
					case 'W':result = wWidth;break;
					default: result = 'Err';			
				}
				return result;
			},
			spred:function(e){
				var animation = uni.createAnimation({
					duration: 200,
					timingFunction: 'ease',
				});
				this.animationData = animation.export();
				
				if(this.isShow){
					this.zIndex = 1;
					animation.rotate(135).step();
				}
				else{
					animation.rotate(0).step();
				}
				this.animationData = animation.export();
			},
		}
	}
	
</script>

<style lang="scss">
	.box{
		position: fixed;
		left: 5upx;
		top: 70%;
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		background-color: rgba($color: #000000, $alpha: 0.5);
		
		> image{
			width: 40upx;
			height: 40upx;
			z-index: 99;
			top: 25%;
			left: 25%;
		}
	}
	.menu{
		color:white;
		position: fixed;
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		background-color: rgba($color: #000000, $alpha: 0.8);
		
		image{
			width: 40upx;
			height: 40upx;
			z-index: 99;
			margin: 20upx;
		}
	}
	.menu0{
		left: 5upx;
		opacity: 0;
		transition: top 0.2s, left 0.2s, opacity 0.2s;
	}
	.menu1{
		left: 20upx;
		transition: top 0.2s, left 0.2s, opacity 0.2s;
	}
	.menu2{
		left: 106upx;
		transition: top 0.2s, left 0.2s, opacity 0.2s;
	}
	.menu3{
		left: 145upx;
		transition: top 0.2s, left 0.2s, opacity 0.2s;
	}
	.menu4{
		left: 106upx;
		transition: top 0.2s, left 0.2s, opacity 0.2s;
	}
	.menu5{
		left: 20upx;
		transition: top 0.2s, left 0.2s, opacity 0.2s;
	}
	.menu0R{
		right: 5upx;
		opacity: 0;
		transition: top 0.2s, right 0.2s, opacity 0.2s;
		
	}
	.menu1R{
		right: 20upx;
		transition: top 0.2s, right 0.2s, opacity 0.2s;
	}
	.menu2R{
		right: 106upx;
		transition: top 0.2s, right 0.2s, opacity 0.2s;
	}
	.menu3R{
		right: 145upx;
		transition: top 0.2s, right 0.2s, opacity 0.2s;
	}
	.menu4R{
		right: 106upx;
		transition: top 0.2s, right 0.2s, opacity 0.2s;
	}
	.menu5R{
		right: 20upx;
		transition: top 0.2s, right 0.2s, opacity 0.2s;
	}
</style>
